<template>
	<div>
		<van-nav-bar
			title="所有订单"
			left-text="返回"
			left-arrow
			fixed
			@click-left="ret" />
		<div style="height: 50px; width: 100vw"></div>
		<van-tabs
			v-model:active="active"
			@click-tab="searchOrder">
			<van-tab
				v-for="tab in tabList"
				:key="tab.id"
				:title="tab.name"
				:name="tab.id">
				<van-card
					v-for="order in orderList"
					:key="order.id"
					:price="order.amount"
					:desc="'商品名称: ' + order.pro.product.name"
					:title="'订单号: ' + order.code"
					:thumb="order.pro.product.thumb_swiper">
					<template #tags>
						<div>下单时间: {{ order.createtime }}</div>
					</template>
					<template #num>
						<van-tag
							plain
							type="danger">
							{{ order.status_text }}
						</van-tag>
					</template>
					<template #footer>
						<van-button
							size="mini"
							type="primary"
							@click="orderInfo(order.id)"
							>订单详情</van-button
						>
						<van-button
							v-if="order.status == 0"
							size="mini"
							type="primary"
							>去支付</van-button
						>
						<van-button
							v-if="order.status != 0 && order.status != 1"
							size="mini"
							type="warning"
							@click="orderExpress(order.id)"
							>查看物流</van-button
						>
						<van-button
							v-if="order.status == 3"
							size="mini"
							color="#7232dd"
							@click="OrderAppraise(order.id)"
							>去评价</van-button
						>
						<van-button
							v-if="order.status == 2"
							size="mini"
							color="#7232dd"
							@click="ConfirmShop(order.id)"
							>确认收货</van-button
						>
						<van-button
							size="mini"
							type="danger"
							v-if="order.status > 0"
							@click="refund(order.id)"
							>申请退款</van-button
						>
					</template>
				</van-card>
			</van-tab>
		</van-tabs>

		<van-overlay
			:show="isSend"
			style="display: flex; align-items: center; justify-content: center">
			<van-loading vertical>
				<template #icon>
					<van-icon
						name="star-o"
						size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { showDialog, showFailToast, showSuccessToast } from "vant";
	export default {
		created() {
			this.searchOrder();
		},
		data() {
			return {
				// 标签选中值
				active: "all",
				// 标签列表
				tabList: [
					{
						id: "all",
						name: "全部",
					},
					{
						id: "0",
						name: "未支付",
					},
					{
						id: "1",
						name: "未发货",
					},
					{
						id: "2",
						name: "已发货",
					},
					{
						id: "3",
						name: "未评价",
					},
					{
						id: "4",
						name: "已评价",
					},
					{
						id: "-1",
						name: "退货",
					},
					{
						id: "-2",
						name: "退货中",
					},
				],
				isShow: '',
				orderList: [],
				// 遮罩显示
				isSend: false,
				isLoading: false,
			};
		},
		methods: {
			ret() {
				this.$router.push("/business");
			},
			async searchOrder() {
				if (this.isShow == this.active) {
					return;
				}
				this.isLoading = true;
				this.isShow = this.active;
				let res = await this.$api.SearchOrder({
					busid: this.$cookies.get("User").id,
					status: this.active,
				});
				if (res.code == 1) {
					this.orderList = res.data;
				}else{
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
			},
			// 查看详情
			async orderInfo(id) {
				this.$router.push({ path: "/business/orderinfo", query: { id } });
			},
			// 查看物流
			orderExpress(id) {
				this.$router.push({ path: "/business/orderexpress", query: { id } });
			},
			// 去评论
			OrderAppraise(id) {
				this.$router.push({ path: "/business/orderappraise", query: { id } });
			},
			// 确认收货
			ConfirmShop(id) {
				let _this = this;
				showDialog({
					title: "收货",
					message: "确认收到物品？",
					showCancelButton: true,
				}).then(async () => {
					this.isSend = true;
					this.isLoading = true;
					let res = await this.$api.OrderConfirm({
						id,
						busid: this.$cookies.get("User").id,
					});
					
					if (res.code == 1) {
						showSuccessToast({
							message: "收货成功，祝您开心",
							onClose() {
								_this.$router.go(0);
							},
						});
					} else {
						showFailToast({ message: res.msg });
					}
					this.isLoading = false;
				});
			},
			// 退货
			refund(id) {
				let _this = this;
				showDialog({
					title: "退货",
					message: "真的要退掉此订单商品吗",
					showCancelButton: true,
				}).then(async () => {
					this.isSend = true;
					this.isLoading = true;
					let res = await this.$api.OrderRefund({
						id,
						busid: this.$cookies.get("User").id,
					});
					
					if (res.code == 1) {
						showSuccessToast({
							message: res.msg,
							onClose() {
								_this.$router.go(0);
							},
						});
					} else {
						showFailToast({ message: res.msg });
					}
					this.isLoading = false;
				});
			},
		},
	};
</script>

<style></style>
